<template>
  <view class="smart-page">
    <!-- 页面标题头begin-->
    <view class="smart-page-head">
      <view class="smart-page-head-title">video视频</view>
    </view>
    <!-- 页面标题头end-->
    <view>
      <video
        id="myVideo"
        src="../../../../static/video/shipin.mp4"
        danmu-btn="true"
        enable-danmu="true"
        :danmu-list="video_danmu_list"
      ></video>
      <view class="input_box">
        <input placeholder="评论内容..." v-model="inputValue" />
      </view>
      <view class="btn_box">
        <button type="primary" @click="sendMsg">发送弹幕</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "", // 输入框
      videoContext: "", // 视频文字
      video_danmu_list: [
        {
          text: "你好",
          time: 1,
          color: "#abc342",
        },
        {
          text: "我很好，你好吗？",
          time: 2,
          color: "#ff5500",
        },
        {
          text: "我也很好！",
          time: 3,
          color: "#0000ff",
        },
      ],
    };
  },
  onReady: function () {
    this.videoContext = uni.createVideoContext("myVideo");
  },
  methods: {
    /*发送弹幕*/
    sendMsg() {
      console.log("弹幕内容：" + this.inputValue);
      this.videoContext.sendDanmu({
        text: this.inputValue,
        color: "red",
      });
    },
  },
};
</script>

<style>
.input_box {
  background-color: #ccc9ca;
}
.btn_box {
  margin-top: 20upx;
}
</style>